<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./images/hp-blue-favicon.png" rel="icon" type="image/png" sizes="32x32">
    <title>Admin Page - Web Tours</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #e6f0fa;
        }
        .header {
            background-color: #003087;
            color: white;
            padding: 10px;
            display: flex;
            align-items: center;
        }
        .header img {
            height: 30px;
            margin-right: 10px;
        }
        .container {
            margin: 20px auto;
            padding: 20px;
        }
        h1 {
            text-align: center;
            color: #003087;
        }
        h2 {
            text-align: center;
            color: #333;
        }
        .form-section {
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        td {
            padding: 10px;
            border-bottom: 1px solid #ccc;
        }
        td:first-child {
            width: 30px;
            vertical-align: top;
        }
        td:last-child {
            vertical-align: top;
        }
        .description {
            margin-left: 20px;
            color: #666;
            font-size: 0.9em;
        }
        input[type="checkbox"] {
            margin: 0;
        }
        input[type="number"] {
            width: 60px;
            margin-left: 5px;
        }
        .update-btn {
            display: block;
            margin: 20px auto;
            padding: 10px 20px;
            background-color: #003087;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .update-btn:hover {
            background-color: #0056b3;
        }
        .return-link {
            text-align: center;
            margin-top: 20px;
        }
        .return-link a {
            color: #003087;
            text-decoration: none;
        }
        .return-link a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div class="header">
    <img src="./images/hp_logo.png" alt="HP Logo">
    <span>Web Tours</span>
</div>

<div class="container">
    <h1>ADMINISTRATION PAGE</h1>
    <h2>Server Reconfigured.</h2>

    <div class="form-section">
        <table>
            <tr>
                <td><input type="checkbox" name="extraHTML"></td>
                <td>
                    Add extra HTML form code to the page within HTML comments.
                    <div class="description">The extra HTML code is ignored by the browsers, but it could pose a problem for parsers.</div>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" name="javascript"></td>
                <td>
                    Add additional Javascript that will calculate the days in advance for the ticket purchase. It appears on the first flight reservation page and will calculate the days in advance on the submission of the initial flight information form.
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" name="loginAction"></td>
                <td>
                    Set login form's action tag to an error page. When the user submits the form, a javascript routine will re-set the action tag and alter the hidden field flag. The login.pl (what the action tag is reset to by javascript) script checks to make sure the hidden field flag has been set.
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" name="reservationAction"></td>
                <td>
                    When the user submits the form, a javascript routine will re-set the action tag and alter the hidden field flag. The reservation.pl (what the action tag is reset to by javascript) script checks to make sure the hidden field flag has been set.
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" name="clientValidation"></td>
                <td>
                    Set client-side verification of user data. This turns on verification of the user data on the client side in the necessary pages during the reservation and signup processes.
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" name="generateHTML"></td>
                <td>
                    Generate HTML code on the client side instead of server side. In some cases, if there was some calculation done to create the HTML, there could be problems discovering what the HTML actually is. Additionally, there is a form on this page... creating a bit of trouble when using web_submit_form.
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" name="redirectTemp"></td>
                <td>
                    Set redirects to the user to a temporary .html file. Instead of the CGI output going to the user, it is saved to a temporary .html file. The user is then redirected to that .html file, in order to see the results.
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" name="scriptRedirect"></td>
                <td>
                    Set this option to turn on some server side redirects. Instead of a CGI script returning HTML to display, the CGI script returns a new URL for the browser to goto.
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" name="errorFrequency"></td>
                <td>
                    Set probability (in percentages) of the server making an illegal function call. The CGI process then will crash, resulting in an "Internal Server Error" generated by the Web server. This error provides no options for the user to continue with.
                    <br>Frequency (in percent): <input type="number" name="errorFreq" value="30" min="0" max="100">
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" name="loadProblem"></td>
                <td>
                    Set probability (in percentages) of the server simulating a load problem. Instead of the process crashing, an HTML page is generated that notifies the user of the problem. The user can choose to either try again (re-submit the same data over) or to restart their reservation process.
                    <br>Frequency (in percent): <input type="number" name="loadFreq" value="50" min="0" max="100">
                </td>
            </tr>
        </table>
    </div>

    <button class="update-btn">Update</button>

    <div class="return-link">
        <a href="./home.html">Return to the Web Tours Homepage</a>
    </div>
</div>

<script>
    document.querySelector('.update-btn').addEventListener('click', function() {
        alert('Settings updated!');
    });
</script>
</body>
</html>